import './style.less';
import React, {Dispatch, FC, useCallback} from "react";
import {IComponent} from "@bastet/widgets";
import { wrapEvent, wrapStyleEvent, wrapPositionEvent } from "./components/wrap";
import { RootInformation } from "./RootInformation";
import {
  StyleComponent,
  PositionComponent,
  GroupComponent,

  DownloadComponent,
  SwitchComponent,
  SelectComponent,
  TabsComponent,
  TabPaneComponent,
  TextComponent,
  ImageComponent,
  UploadComponent,
  ColorComponent,

  PanelComponent,

  ArrayComponent,
  ObjectComponent,
  NumberComponent,
} from './components'

interface IInformationProps {
  Component: FC<any>;
  onChange: (arg1: any, arg2: string, arg3: string) => void;
  renderProps: object;
  path: string;
}
function Information({ Component, onChange, renderProps, path }: IInformationProps) {
  const Style = useCallback(wrapStyleEvent(StyleComponent, { onChange, renderProps }) as any, [renderProps] as any)
  const Text = useCallback(wrapEvent(TextComponent, { onChange, renderProps }) as any, [renderProps] as any)
  const Select = useCallback(wrapEvent(SelectComponent, { onChange, renderProps }) as any, [renderProps] as any)
  const Tabs = useCallback(wrapEvent(TabsComponent, { onChange, renderProps }) as any, [renderProps] as any)
  const TabPane = useCallback(wrapEvent(TabPaneComponent, { onChange, renderProps }) as any, [renderProps] as any)
  const Position = useCallback(wrapPositionEvent(PositionComponent, { onChange, renderProps }) as any, [path] as any)
  const Group = useCallback(GroupComponent as any, [] as any)
  const Panel = useCallback(PanelComponent as any, [] as any)
  const Upload = wrapEvent(UploadComponent)
  const Switch = wrapEvent(SwitchComponent)
  const Download = wrapEvent(DownloadComponent)
  const Image = wrapEvent(ImageComponent)
  const ObjectCpt = wrapEvent(ObjectComponent)
  const ArrayCpt = wrapEvent(ArrayComponent)
  const NumberCpt = wrapEvent(NumberComponent)
  const Color = wrapEvent(ColorComponent)

  return (
    <Component
      Style={Style}
  Text={Text}
  Select={Select}
  Position={Position}

  Tabs={Tabs}
  TabPane={TabPane}
  Group={Group}
  Upload={Upload}
  Download={Download}
  Image={Image}
  Switch={Switch}
  Color={Color}

  Object={ObjectCpt}
  Array={ArrayCpt}
  Number={NumberCpt}

  Panel={Panel}

  renderProps={renderProps}
  onChange={onChange}
  />
)
}

interface IBuilderInformationProps {
  information: IComponent;
  dispatch: (arg: any) => void;
}

export const BuilderInformation = React.memo(({ information, dispatch }: IBuilderInformationProps) => {
  const { type, name, path, renderProps, render } = information
  const onChange = (value: any, field: string) => {
    // console.log('dispatch: => ', value, field, information.path)
    if (field) {
      // dispatch(value, field, information.path)
      dispatch({ value, field, path: information.path })
    } else {
      console.error(`filed "${field}" is undefined.`)
    }
  }

  const RenderComponent: FC<any> = useCallback(path === 'playground' ? RootInformation : render, [render] as any);

  // console.log('BuilderInformation:render => ', render, RenderComponent)
  // console.log('onFiledChange => ', information, path)

  return (
    <div className='builder-information'>
    <div className="flex-row-between control control-bar">
    <div className="co-title">详情</div>
      <div className="flex-end">
  <div className="ctrl-bar-close">X</div>
    </div>
    </div>
    <div className="builder-information-body">
  <form id="information" name="information">
    {
      RenderComponent && (
      <Information
        path={path}
  Component={RenderComponent}
  renderProps={renderProps}
  onChange={onChange}
  />
)
}
  </form>
  </div>
      <button>保存</button>
  </div>
)
})